<template>
	<dt-main-body v-model="labelPosition">
		<div class="location">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>
					<i class="iconfont icon-home"></i>
					管理中心
				</el-breadcrumb-item>
				<el-breadcrumb-item>商城管理</el-breadcrumb-item>
				<el-breadcrumb-item>添加订单</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		
		<div class="content-box">
			<el-form ref="editForm" :model="model" :rules="rules" :label-position="labelPosition" label-width="120px">
				<el-tabs v-model="activeName" type="card">
					<el-tab-pane label="基本信息" name="info">
						<div class="tab-content">
							<el-form-item prop="userId" label="会员账户">
								<dt-member-select v-model="model.userId"></dt-member-select>
							</el-form-item>
							<el-form-item prop="orderType" label="订单类型">
								<el-select v-model="model.orderType" placeholder="请选择...">
									<el-option label="普通订单" :value="0"></el-option>
									<el-option label="抢购订单" :value="1"></el-option>
									<el-option label="预售订单" :value="2"></el-option>
									<el-option label="换购订单" :value="3"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item prop="paymentId" label="支付方式">
								<el-select v-model="model.paymentId" placeholder="请选择...">
									<el-option v-for="item in paymentList"
										:key="item.id"
										:label="item.title"
										:value="item.id">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="订单列表">
								<dt-order-multiple :type="model.orderType" v-model="model.orderList"></dt-order-multiple>
							</el-form-item>
							<el-form-item prop="acceptName" label="收件人">
								<el-input v-model="model.acceptName" placeholder="必填，收货人的姓名"></el-input>
							</el-form-item>
							<el-form-item prop="mobile" label="手机号码">
								<el-input v-model="model.mobile" placeholder="必填，收货人的手机号码"></el-input>
							</el-form-item>
							<el-form-item prop="telPhone" label="固定电话">
								<el-input v-model="model.telPhone" placeholder="可空，收货人固定电话号码"></el-input>
							</el-form-item>
							<el-form-item label="收货地区">
								<el-row class="select-list">
									<el-col :xs="24" :sm="8">
										<el-form-item prop="province">
											<el-select v-model="model.province" @change="handleProvinceChange" placeholder="请选择省份">
												<el-option v-for="item in provinceList"
													:key="item.id"
													:label="item.title"
													:value="item.title">
												</el-option>
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :xs="24" :sm="8">
										<el-form-item prop="city">
											<el-select v-model="model.city" @change="handleCityChange" placeholder="请选择城市">
												<el-option v-for="item in cityList"
													:key="item.id"
													:label="item.title"
													:value="item.title">
												</el-option>
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :xs="24" :sm="8">
										<el-form-item prop="area">
											<el-select v-model="model.area" placeholder="请选择地区">
												<el-option v-for="item in areaList"
													:key="item.id"
													:label="item.title"
													:value="item.title">
												</el-option>
											</el-select>
										</el-form-item>
									</el-col>
								</el-row>
							</el-form-item>
							<el-form-item prop="address" label="详细地区">
								<el-input type="textarea" :row="3" v-model="model.address" placeholder="必填，除省市区外的详细地区"></el-input>
							</el-form-item>
						</div>
					</el-tab-pane>
				</el-tabs>
			</el-form>
		</div>
		
		<div class="footer-box">
			<div class="footer-btn">
				<el-button type="primary" :loading="loading" @click="submitForm">确认保存</el-button>
				<el-button plain @click="$common.back()">返回上一页</el-button>
			</div>
		</div>
	</dt-main-body>
</template>

<script>
	import DtMemberSelect from '../../components/DtMemberSelect.vue'
	import DtOrderMultiple from '../../components/DtOrderMultiple.vue'
	
	export default {
		components: {
			DtMemberSelect,
			DtOrderMultiple
		},
		props: {
			id: 0
		},
		data() {
			return {
				activeName: 'info', //当前选项卡
				labelPosition: 'right', //表单对齐方式
				loading: false,
				paymentList: [],
				provinceList: [],//省份列表
				cityList: [],//城市列表
				areaList: [],//地区列表
				model: {
					orderType: 0,
					userId: null,
					paymentId: null,
					acceptName: null,
					telPhone: null,
					mobile: null,
					province: null,
					city: null,
					area: null,
					address: null,
					orderList: []
				},
				rules: {
					userId: [
						{ required: true, message: '请选择下单会员', trigger: 'change' }
					],
					orderType: [
						{ required: true, message: '请选择订单类型', trigger: 'change' }
					],
					paymentId: [
						{ required: true, message: '请选择支付方式', trigger: 'change' }
					],
					acceptName: [
						{ required: true, message: '请输入收货人姓名', trigger: 'blur' }
					],
					mobile: [
						{ required: true, message: '请输入收货人手机号码', trigger: 'blur' },
						{ pattern: /^1[0-9]{10}$/, message: '手机号码格式不正确', trigger: 'blur' }
					],
					province: [
						{ required: true, message: '请选择配送省份', trigger: 'change' }
					],
					city: [
						{ required: true, message: '请选择配送城区', trigger: 'change' }
					],
					area: [
						{ required: true, message: '请选择配送地区', trigger: 'change' }
					],
					address: [
						{ required: true, message: '请输入除省市区外收货地址', trigger: 'blur' }
					],
				}
			}
		},
		methods: {
			//提交表单
			submitForm() {
				let _this = this; //当前页面
				//多个表单验证
				const f1 = new Promise((resolve, reject) => {
					_this.$refs['editForm'].validate((valid) => {
						if (valid) resolve();
					});
				});
				Promise.all([f1]).then(() => {
					//检查及组合参数
					if (_this.model.orderList.length === 0) {
						_this.$message({ type: 'warning', message: '错误提示：请添加订单列表' });
						return false;
					}
					//连接收货地址
					_this.$api.request({
						method: 'post',
						url: '/admin/order',
						data: _this.model,
						successMsg: '新增订单已成功',
						beforeSend() {
							_this.loading = true;
						},
						success(res) {
							_this.$common.linkUrl('/order/list');
						},
						complete() {
							_this.loading = false
						}
					});
				});
			},
			//初始化数据
			initData() {
				let _this = this;
				//加载支付列表
				_this.$api.request({
					url: '/admin/payment',
					success(res) {
						_this.paymentList = res.data
					}
				});
				//加载省份列表
				_this.$api.request({
					url: '/admin/area/view/0',
					success(res) {
						_this.provinceList = res.data;
					}
				});
			},
			//省份回调事件
			handleProvinceChange(val) {
				let _this = this;
				//加载城市列表
				_this.$api.request({
					url: '/admin/area/view/0?keyword=' + encodeURI(val),
					success(res) {
						_this.cityList = res.data;
					},
					error(err) {
						_this.cityList = [];
					},
					complete() {
						_this.model.city = null;
						_this.model.area = null;
						_this.areaList = [];
					}
				});
			},
			//城市回调事件
			handleCityChange(val) {
				let _this = this;
				//加载城市列表
				_this.$api.request({
					url: '/admin/area/view/0?keyword=' + encodeURI(val),
					success(res) {
						_this.areaList = res.data;
					},
					error(err) {
						_this.areaList = []
					},
					complete() {
						_this.model.area = null;
					}
				});
			},
		},
		created() {
			this.initData();
		}
	}
</script>